<template>
  <view>
    <view v-if="current == 0">
      <uni-nav-bar dark left-icon="left" shadow background-color="#497bff" status-bar title="点名详情"
        @clickLeft="back1()" />
      <view class="uni-list-cell">
        <view>
          <view class="topTitleV unitV">{{ formatDate(message.claDate) }}</view>
          <view class="list-paixu">
            <view class="topTitleV">{{message.startTime}} 一 {{message.endTime}} </view>
          </view>


          <view
            style="display: flex; flex: 1; ; margin-top: 0px; margin-left: -8px; height: 38px; width:calc(100vw-62px)">

            <!--      <view class="cellView" :style="{ color: bindColor(index), backgroundColor: bindBgColor(index) }">
          {{message.roomName}}{{message.roomId}}
        </view> -->
          </view>

        </view>




      </view>
      <u-modal v-model="show" @confirm="confirm" @cancel="cancel" :show-cancel-button='true' content='请假学生需慎重,一经修改将直接点名'>
      </u-modal>
      <view class="task">
        
        <view class="invitation">
          <view class="item">
            <text class="texts">请假详情({{message.leaveCnt}}/{{add()}})</text>

            <view class="completes" v-if="studentLeaveList.length > 3" @click="navToLeave()">
              <text>查看更多</text>
            </view>
          </view>
          <view v-for="(item,index) in studentLeaveList" v-if="index < 3" class="item" :key="index">
            <view class="icon">
              <image :src="CanvasPattern(index)">
            </view>
            <view class="cent">
              <text>{{item.studentName}}</text>
              <text>剩余{{item.balanceHour}}课时</text>
            </view>
            <view @click="showmodal(item)" class="complete"
              :style="{
								backgroundColor: item.attendStatus === '1'  ? '#007aff' : '#ffffff',color:item.attendStatus  === '1'  ? '#ffffff' : '#000000'}">
              <text>到课</text>
            </view>
            <view @click="showmodal(item)" class="complete"
              :style="{
								backgroundColor: item.attendStatus === '2'  ? '#007aff' : '#ffffff',color:item.attendStatus === '2'  ? '#ffffff' : '#000000' }">
              <text>请假</text>
            </view>
          </view>
        </view>
      </view>
      <view class="task">

        <view class="invitation">
          <view class="item">

            <text class="texts">到课详情({{message.atClassCnt}}/{{add()}})</text>
            <view class="completes" v-if="studentClassList.length > 3" @click="navToclass()">
              <text>查看更多</text>
            </view>
          </view>


        
          <view v-for="(item,index) in studentClassList" class="item" :key="index" v-if="index < 3">
            <view class="icon">
              <image :src="CanvasPattern(index)">
            </view>
            <view class="cent">
              <text>{{item.studentName}}</text>
              <text>剩余{{item.balanceHour}}课时</text>
            </view>
            <view @click="classCourse(item)" class="complete"
              :style="{
								backgroundColor: item.attendStatus === '1'  ? '#007aff' : '#ffffff',color:item.attendStatus  === '1'  ? '#ffffff' : '#000000'}">
              <text>到课</text>
            </view>
            <view @click="leave(item)" class="complete"
              :style="{
								backgroundColor: item.attendStatus === '2'  ? '#007aff' : '#ffffff',color:item.attendStatus === '2'  ? '#ffffff' : '#000000' }">
              <text>请假</text>
            </view>
          </view>
        </view>
      </view>
      <u-row gutter="32" class="bottom-box" justify="center">
        <u-col span="10">
          <view><u-button type="primary" shape="circle" @click="submit()">点名</u-button></view>
        </u-col>
      </u-row>
    </view>

    <view v-else-if="current == 1">
      <uni-nav-bar dark :fixed="true" left-icon="left" shadow background-color="#497bff" status-bar title="点名"
        @clickLeft="back2()" />
      <view class="background">
        <list-item :items="studentClassList"></list-item>
      </view>
    </view>

    <view v-else-if="current == 2">
      <uni-nav-bar dark :fixed="true" left-icon="left" shadow background-color="#497bff" status-bar title="点名"
        @clickLeft="back2()" />

      <view class="background">
        <list-item :items="studentLeaveList"></list-item>
      </view>
    </view>











  </view>
</template>

<script>
  import moment from 'moment';
  moment.locale('zh-cn');
  export default {
    onBackPress() {
    
      if (this.current == 0) {
          var pages=getCurrentPages ()
          var pre = pages[pages.length-2]//上一个页面
           pre.$vm.datechange({
             fulldate: this.message.claDate,
             
             })
           return false
          
        
      }
      this.current = 0
      return true

    },

    data() {
      return {
        show : false,
        message: '',
        studentClassList: '',
        studentLeaveList: '',
        current: 0,
        item: ''
      }
    },






    methods: {
      CanvasPattern(index) {
        return require('@/static/common/img/people' + index % 8 + '.png')

      },
      add() {

        return this.message.atClassCnt + this.message.leaveCnt
      },

      formatDate(dateStr) {
        const da = moment(dateStr);
        const formatted = da.format('YYYY年MM月DD日');
        const dayOfWeek = da.format('dddd');
        return `${formatted} ${dayOfWeek}`;
      },
      classCourse(item) {
        item.attendStatus = '1'
      },
      leave(item) {
        item.attendStatus = '2'
      },
      back1() {
        uni.navigateBack({
          delta: 1
        });
      },
      back2() {
        this.current = 0
      },
      navToclass() {

        this.current = 1
      },
      navToLeave() {

        this.current = 2

      },
      submit() {

        this.$u.api.addAttend({
          courseTimeId: this.message.courseTimeId,
          claId: this.message.claId,
          courseId : this.message.courseId,
          teacherId: this.message.teacherId,
          payHour: this.message.payTotalHour,
          teacherName: this.message.name,
          claTimeAttendItemList: this.studentClassList
        }).then(res => {
          if (res.code == 200) {
            let msg = {
             	warningTypeStr: "通知消息",
             	projectName: "现在",
             	description: "点名成功",
               messageImage: ''
             };
            this.createAlarm(msg, res => {
             });
            uni.navigateBack({  
                                delta: 1
                            });
                            
          } else {

            uni.showToast({
              title: '校对学员的学时是否符合要求',
              icon: 'error'
            })
          }




        })
},

confirm(){
  
  if(this.item.attendStatus == '1'){
     this.item.attendStatus = '2'
     this.item.payHour = this.message.payTotalHour
  }
  else{
     this.item.attendStatus = '1'
     this.item.payHour =this.message.payTotalHour
  }
  this.$u.api.updateAttend(
     this.item
  ).then(res => {
    if (res.code == 200) {
      console.log(res)
    } else {
      console.log(res.msg)
    }
  })
  this.item = ''
},
cancel(){
  this.item = ''
},
showmodal(item){
  this.item = item 
  this.show = true
},
      },


    onLoad(options) {
      // 解析传递的对象
      if (options.data !== null) {
        this.message = options.data;
      }

      this.$u.api.mobileClassList({
        claId: this.message.claId,
        courseTimeId: this.message.courseTimeId,
      }).then(res => {
        if (res.code == 200) {
          this.studentClassList = res.data.scStudentClaTimes
          this.studentLeaveList = res.data.claTimeAttends
        }




      })







    },


  }
</script>

<style lang="scss" scoped>
  .background {
    background-color: #f7f7f7;
    width: 100vw;
    // min-height: calc(100vh - 100rpx);
    /* #ifdef H5 */
    min-height: 70vh;
    /* #endif */
    /* #ifndef H5 */
    min-height: 100vh;
    /* #endif */
    padding-top: 1rpx;

    .filter {
      background: #fff;
      padding: 30rpx;
      width: 100vw;
      overflow-x: scroll;

      .filter-item {
        min-width: 200rpx;
        height: 80rpx;
        background: #F4F6F9;
        border-radius: 20px;
        background: #F4F6F9;
        background-size: 39rpx 30rpx;
        margin-right: 20rpx;

        font-size: 32rpx;
        color: #7F8BB4;
        font-weight: 400;

        image {
          width: 33rpx;
        }
      }
    }
  }

  page {

    background-color: #F3F4F6;
  }

  .texts {
    flex: 1;
    display: flex;
    flex-direction: column;
    font-size: 24rpx;
    color: #999999;
    line-height: 34rpx;
    margin: 6rpx 0 22rpx 0;

  }

  .uni-list-cell {
    background-image: url('/static/common/img/read.png');
    width: 100%;
    height: 200rpx;
    flex-direction: column;
    background-size: 120% 280%;
    /* 或者使用 cover、100% 100% 等值 */
    background-position: center;
    padding: 6rpx 30rpx;
  }

  .inner {
    position: relative;
    top: 5.8%;
  }

  .list-paixu {

    display: flex;
  }

  .topTitleV {
    height: 40rpx;
    line-height: 40rpx;
    color: #2a2a2a;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 500;
    font-size: 50rpx;

  }

  .topTitleVv {
    color: #737373;
    margin-left: 30rpx;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 500;
    font-size: 28rpx;
    display: inline-block;
    padding: 5rpx 10rpx;
    border: 1rpx solid #a5a5a5;
    white-space: nowrap;

  }

  .unitV {
    color: #737373;
    font-size: 15px;
    margin-top: 0px;
    font-family: PingFangSC-Regular, PingFang SC;

  }

  .cellView {
    margin-top: 28rpx;
    margin-left: -17rpx;
    height: 40rpx;
    text-align: center;
    padding: 5rpx 25rpx !important;
    font-size: 12px;

    color: #ff0000;
    background: #ffe1e1;
  }

  .cellViews {
    margin-top: 50rpx;
    margin-left: -17rpx;
    height: 40rpx;
    text-align: center;
    padding: 5rpx 20rpx !important;
    font-size: 12px;

    color: #ff0000;
    background: #ffe1e1;
  }

  .task {
    width: 100%;
    height: 445rpx;
    background: #FFFFFF;
    border-radius: 20rpx;
    margin-top: 24rpx;
    padding: 40rpx 30rpx 0 20rpx;
    display: flex;
    flex-direction: column;

    .title {
      font-size: 32rpx;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #333333;
      line-height: 44rpx;
    }

    .text {
      font-size: 24rpx;
      color: #999999;
      line-height: 34rpx;
      margin: 6rpx 0 22rpx 0;
    }

    .list {
      display: flex;
      justify-content: space-between;
      margin-bottom: 74rpx;

      >view {
        width: 92rpx;
        height: 116rpx;
        background: linear-gradient(90deg, #A47EFF 0%, #8F64FB 100%);
        border-radius: 6rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        >image {
          width: 58rpx;
          height: 56rpx;
        }

        >text {
          font-size: 20rpx;
          color: #FFFFFF;
          line-height: 28rpx;
          margin-top: 6rpx;
        }
      }
    }

    .invitation {
      .item {
        display: flex;
        align-items: center;
        margin-bottom: 25rpx;

        .icon {
          width: 84rpx;
          height: 84rpx;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 14rpx;

          >image {
            width: 84rpx;
            height: 84rpx;
          }
        }

        .cent {
          flex: 1;
          display: flex;
          flex-direction: column;

          >text:first-child {
            font-size: 28rpx;
            color: #333333;
            line-height: 40rpx;
          }

          >text:last-child {
            font-size: 24rpx;
            color: #999999;
            line-height: 34rpx;
          }
        }

        .complete {
          width: 100rpx;
          height: 50rpx;
          border-radius: 2rpx;
          justify-content: center;
          align-items: center;
          text-align: center;

          border: 0.5rpx solid #e6e6e6;


          >text {
            font-size: 24rpx;
            font-weight: 600;
            line-height: 50rpx;
          }
        }

        .completes {
          width: 100rpx;
          height: 50rpx;
          border-radius: 2rpx;
          justify-content: center;
          align-items: center;
          text-align: center;
          border: 0.5rpx solid #e6e6e6;
          color: #ffffff;
          line-height: 30upx;
          font-size: 20upx;
          top: 15upx;
          border-radius: 15upx;
          background-color: #FF6633;

          >text {
            font-size: 21rpx;
            line-height: 50rpx;
          }
        }
      }
    }
  }
</style>